<template>
  <div>
    <el-dialog title="用户详情" :visible.sync="show" width="800px" append-to-body :close-on-click-modal="false">
      <div v-if="row.userId">
        <div class="detail-title">基本信息</div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">用户姓名</div>
            <div class="detail-value">{{ row.nickName || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">性别</div>
            <div class="detail-value">
              {{ row.sex == 0 ? "男" : row.sex == 1 ? "女" : "未知" }}
            </div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">手机号码</div>
            <div class="detail-value">{{ row.phonenumber || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">身份证号</div>
            <div class="detail-value">{{ row.idCard || "--" }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">机构名称</div>
            <div class="detail-value">
              {{ row.serviceOrg.legalPersonName || "总平台" }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">用户类型</div>
            <div class="detail-value">{{ row.userType | enumUserType }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-row">
            <div class="detail-label">注册时间</div>
            <div class="detail-value">{{ row.createTime || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">账号状态</div>
            <div class="detail-value">
              <el-tag type="primary">
                {{ getByStatus(row.status) }}
              </el-tag>
            </div>
          </div>
        </div>
        <!-- 新增 -->
        <div class="detail-row" v-if="row.userType == '01'">
          <div class="detail-row">
            <div class="detail-label">技术负责人姓名</div>
            <div class="detail-value">
              {{ row.serviceOrg.technicalDirectorName || "--" }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">技术负责人手机号</div>
            <div class="detail-value">{{ row.serviceOrg.technicalDirectorPhone || "--" }}</div>
          </div>
        </div>
        <div class="detail-row" v-if="row.userType == '01'">
          <div class="detail-row">
            <div class="detail-label">企业统一社会信用代码</div>
            <div class="detail-value">
              {{ row.serviceOrg.creditCode || "--" }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">工商营业执照登记地址</div>
            <div class="detail-value">{{ row.serviceOrg.businessLicenseAddress || "--" }}</div>
          </div>
        </div>
        <div class="detail-row" v-if="row.userType == '01'">
          <div class="detail-row">
            <div class="detail-label">邮政编码</div>
            <div class="detail-value">
              {{ row.serviceOrg.postcode || "--" }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">开户银行</div>
            <div class="detail-value">{{ row.serviceOrg.bankName || "--" }}</div>
          </div>
        </div>
        <div class="detail-row" v-if="row.userType == '01'">
          <div class="detail-row">
            <div class="detail-label">银行账号</div>
            <div class="detail-value">
              {{ row.serviceOrg.bankNumber || "--" }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">邮箱</div>
            <div class="detail-value">{{ row.email || "--" }}</div>
          </div>
        </div>
        <div class="detail-row" v-if="row.userType == '01'">
          <div class="detail-row">
            <div class="detail-label">地区</div>
            <div class="detail-value">{{ getRegionName(row.regionId, regionTreeList)}}</div>
          </div>
        </div>
        <div class="detail-title" v-if="row.serviceOrg.technicalDirectorIdCard && row.userType == '01'">技术负责人身份证</div>
        <div class="image-box" v-if="row.serviceOrg.technicalDirectorIdCard && row.userType == '01'">
          <div v-for="(photo, k) in row.serviceOrg.technicalDirectorIdCard.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + photo" :preview-src-list="[baseURL + photo]" fit="cover" />
          </div>
        </div>
        <div class="detail-title" v-if="row.serviceOrg.businessLicenseCopy && row.userType == '01'">工商营业执照副本</div>
        <div class="image-box" v-if="row.serviceOrg.businessLicenseCopy && row.userType == '01'">
          <div v-for="(photo, k) in row.serviceOrg.businessLicenseCopy.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + photo" :preview-src-list="[baseURL + photo]" fit="cover" />
          </div>
        </div>
        <div class="detail-title" v-if="row.serviceOrg.technicalDirectorCertificate && row.userType == '01'">技术负责人注册证书</div>
        <div class="image-box" v-if="row.serviceOrg.technicalDirectorCertificate && row.userType == '01'">
          <div v-for="(photo, k) in row.serviceOrg.technicalDirectorCertificate.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + photo" :preview-src-list="[baseURL + photo]" fit="cover" />
          </div>
        </div>
        <div class="detail-title" v-if="row.idCardPhoto">身份证照片</div>
        <div class="image-box" v-if="row.idCardPhoto">
          <div v-for="(photo, k) in row.idCardPhoto.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + photo" :preview-src-list="[baseURL + photo]" fit="cover" />
          </div>
        </div>
        <div class="detail-title" v-if="row.faceUrl">人脸采集</div>
        <div class="image-box" v-if="row.faceUrl">
          <div v-for="(photo, k) in row.faceUrl.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + photo" :preview-src-list="[baseURL + photo]" fit="cover" />
          </div>
        </div>
        <div class="detail-title" v-if="row.qualificationName">证书信息</div>
        <div class="detail-row" v-if="row.qualificationName">
          <div class="detail-row">
            <div class="detail-label">证书名称</div>
            <div class="detail-value">{{ row.qualificationName || "--" }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">证书编号</div>
            <div class="detail-value">{{ row.qualificationCode || "--" }}</div>
          </div>
        </div>
        <div class="detail-row" v-if="row.qualificationStartDate">
          <div class="detail-row">
            <div class="detail-label">证书有效期</div>
            <div class="detail-value">
              {{ row.qualificationStartDate || "--" }}~{{
              row.qualificationEndDate || "--"
            }}
            </div>
          </div>
          <div class="detail-row">
            <div class="detail-label">证书年限</div>
            <div class="detail-value">
              {{
                row.certificateValidityPeriod == 1
                  ? "长期"
                  : row.certificateValidityPeriod == 2
                    ? "临期"
                    : "--"
              }}
            </div>
          </div>
        </div>
        <div class="detail-title" v-if="row.qualification">证书照片</div>
        <div class="image-box" v-if="row.qualification">
          <div v-for="(photo, k) in row.qualification.split(',')" :key="k" class="image-item">
            <el-image :src="baseURL + photo" :preview-src-list="[baseURL + photo]" fit="cover" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { regionTree } from "@/api/system/user";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => { },
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      regionTreeList: [], // 区域列表
      statusList: [
        // 状态列表
        { label: "审核通过", value: 1 },
        { label: "删除", value: 2 },
        { label: "待审核", value: 3 },
        { label: "审核拒绝", value: 4 },
        { label: "账户锁定", value: 5 },
      ],
    };
  },
  watch: {
    show(v) {
      if (v) {
        this.getRegionTree();
      }
    }
  },
  methods: {
    // 获取区域列表
    getRegionTree() {
      regionTree().then(res => {
        this.regionTreeList = res.data;
      });
    },
    // 递归查找名称
    getRegionName(id, tree) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].id === id) {
          return tree[i].name;
        } else if (tree[i].children && tree[i].children.length > 0) {
          const result = this.getRegionName(id, tree[i].children);
          if (result !== '') {
            return result;
          }
        }
      }
      return '';
    },
    // 状态名称
    getByStatus(status) {
      let row = this.statusList.find((item) => item.value == status);
      return row ? row.label : "";
    },
  },
};
</script>
<style lang="scss" scoped>
.detail-title {
  font-weight: 600;
  font-size: 14px;
  color: #212121;
  padding: 10px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 14px;
    transform: translateY(-50%);
    background: #4ea770;
    border-radius: 10px;
  }
}

.detail-row {
  flex: 1;
  display: flex;
  padding: 10px;
  align-items: center;

  .detail-label {
    width: 150px;
    font-size: 14px;
    color: #313131;
    font-weight: 600;
  }

  .detail-value {
    font-size: 14px;
    color: #757575;
    flex: 1;
    display: flex;
    justify-content: flex-start;

    div {
      text-align: right;
    }
  }

  .detail-photo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    flex: 1;

    .photo-item {
      color: #909399;
      font-size: 12px;
      border-radius: 4px;
      padding: 3px 10px;
      border: 1px solid #dedede;
      margin: 0 5px 5px 0;
    }
  }
}

.image-box {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 0 15px;
  box-sizing: border-box;

  .image-item {
    position: relative;
    height: 80px;
    width: 80px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
